<template>
    <div v-if="this.goodsDetail" class="creditsDetail">
        <div class="creditsTop">
            <div class="creditsImg">
                <img v-if="this.goodsDetail.goodsPic" :src="this.goodsDetail.goodsPic[1]" alt="">
            </div>
            <div class="creditsIntro">
                <div class="creditsCon">
                    <p><i>{{ goodsDetail.integral }}<span>积分</span></i><del>¥ {{ goodsDetail.goodsPrice }}</del></p>
                    <div>包邮</div>
                </div>
                <div class="creditsBox">
                    {{ goodsDetail.goodsDesc }}
                </div>
            </div>
        </div>
        <div class="creditsBottom">
            <h2>商品详情</h2>
            <div class="creditsDetailImg">
                <img v-if="this.goodsDetail.goodsPic" :src="this.goodsDetail.goodsPic[2]" alt="">
            </div>
        </div>
        <button class="creditsBtn" @click="buy()">积分兑换/购买</button>


        <!-- 支付方式组件 -->
        <mt-popup  v-model="popupZhifuJf" position="right" class="zhifucomponent" :modal="false">
            <ZhifuJf :goodsByInfo="this.goodsByInfo" @payEnter="payEnter"></ZhifuJf>
        </mt-popup>


    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import payWeiXin from '@/assets/js/payWeiXin'
import ZhifuJf from '@/components/ZhifuJf.vue'
export default {
    components:{
        ZhifuJf
    },
    props:{
        goodsDetail:{
            type:Object,
            required:true,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            successMessage:'支付成功，请在个人中心->订单列表查看订单。',
            errMessage1:'积分不足，请选择其他支付方式',
            errMessage2:'余额不足，请选择其他支付方式',
            popupZhifuJf:false,
            goodsByInfo:{
                personIntegral:0,//积分
                personBalance:0,//余额
                goodsPrice:0,
                goodsIntergal:0
            }
        }
    },
    computed:{

    },
    methods:{
        payEnter(data){
            let params = {
                goodsId:this.goodsDetail.goodsId,
                payChannel:data.payChannel,
                snsType:1,
                addressId:data.addressId
            }
            if(!params.addressId){
                {  MessageBox.alert('请选择联系地址','提示');return;} 
            }
            if( Number(data.payChannel) === 3){
                if(this.goodsByInfo.goodsIntergal > this.goodsByInfo.personIntegral){  MessageBox.alert(this.errMessage1,'提示');return;} 
            }
            if( Number(data.payChannel) === 0){
                if(this.goodsByInfo.goodsPrice > this.goodsByInfo.personBalance){  MessageBox.alert(this.errMessage2,'提示');return;} 
            }
            if( Number(data.payChannel) === 2){
                this.$newHttp.post('/order/makeGoodsOrder',params)
                .then(res => {
                    payWeiXin(res.data);
                })
                .catch(err => {console.log(err)});
            }else{
                this.$newHttp.post('/order/makeGoodsOrder',params)
                .then(() => {
                    MessageBox.alert(this.successMessage,'提示').then(() => {
                        // this.popupZhifu = false
                        // this.$emit("close")
                        this.$router.push('/person');
                    })   
                })
                .catch(err => {console.log(err)});
            }
        },
        buy(){
            //调用个人信息积分和余额
            this.$newHttp.post('/userAccount/getUserInfo', {})
                .then(res => {                 
                    if(!res.data || res.data.accountType == 0){
                        this.$router.push('/register');
                    }
                    if(res.data){
                        this.goodsByInfo.personBalance = res.data.balance;
                        this.goodsByInfo.personIntegral = res.data.integral;
                        this.goodsByInfo.goodsPrice = this.goodsDetail.goodsPrice;
                        this.goodsByInfo.goodsIntergal = this.goodsDetail.integral;
                    }      
                })
            .catch(err => { alert(err) });
            this.popupZhifuJf = true
        }
    }
}
</script>

  